<template>
  <div class="main">
    <div>
      <van-nav-bar
        title="密码修改"
        fixed
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="password">
      <van-cell-group inset>
        <van-field
          v-model="update.username"
          label="用户名"
          readonly
        ></van-field>
      </van-cell-group>
      <van-cell-group inset style="margin-top: 3px">
        <van-field
          v-model="update.password"
          type="password"
          label="请输入密码"
        ></van-field>
      </van-cell-group>
      <van-cell-group inset style="margin-top: 3px">
        <van-field
          v-model="update.passwords"
          type="password"
          label="请再次输入"
        ></van-field>
      </van-cell-group>
    </div>
    <div style="margin-top: 16px">
      <van-button type="success" block round @click="updates">修改</van-button>
    </div>
    <div style="margin-top: 16px">
      <van-button type="success" block round @click="cancel">返回</van-button>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item replace to="/main" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/borrow" icon="new-o">借书</van-tabbar-item>
      <van-tabbar-item replace to="/history" icon="records"
        >历史借阅</van-tabbar-item
      >
      <van-tabbar-item replace to="/personal" icon="user-circle-o"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { updatePassword } from "@/api/api";
export default {
  data() {
    return {
      active: 3,
      update: {
        username: "admin",
        password: "",
        passwords: "",
      },
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    updates() {
      if (
        this.update.username == "" ||
        this.update.password == "" ||
        this.update.password != this.update.passwords
      ) {
        this.$Message.error("两个输入不一致或密码为空");
        console.log(this.update);
      } else {
        this.$Modal.confirm({
          title: "确定",
          content: "确认要修改吗？",
          onOk: () => {
            updatePassword(this.update).then((res) => {
              if (res == true) {
                this.$Message.success("修改成功"),
                  setTimeout(() => {
                    history.back();
                  }, 1000);
              } else {
                this.$Message.error(res);
              }
            });
          },
          onCancel: () => {
            this.$Message.info("用户取消修改");
          },
        });
      }
    },
    cancel() {
      history.back();
    },
  },
  created() {
    this.update.username = localStorage.getItem("username");
  },
};
</script>

<style>
.main {
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
  position: fixed;
}
.password {
  margin-top: 15%;
}
</style>
